<template>
	<view class="hot-list">
		<scroll-view class="scroll-view" scroll-y>
			<view class="item" v-for="(item, index) in hotList" :key="index">
				<view class="item-info">
					<view class="item-index">{{ index + 1 }}</view>
					<view class="item-content">
						<view class="item-title">{{ item.title }}</view>
						<view class="item-hot">{{ item.hot }}</view>
					</view>
					<image class="fire-icon" src="/static/icon/hot.png" mode="aspectFit" />
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		CONFIG
	} from '../../utils/config';

	let hotList = ref([]);

	onLoad(() => {
		getHotItems();
	});

	async function getHotItems() {
		try {
			let res = await uni.$get(CONFIG.weibo_url);
			console.log(res);
			if (res.success && res.data) {
				hotList.value = res.data; // 将获取的数据赋值给 hotList
			}
		} catch (error) {
			console.error('Error fetching hot items:', error);
		}
	}
</script>

<style scoped>
	.hot-list {
		padding: 15px;
	}

	.scroll-view {
		height: 100%;
		width: 100%;
	}

	.item {
		display: flex;
		align-items: center;
		border-bottom: 1px solid #f0f0f0;
		padding: 10px 0;
	}

	.item-info {
		display: flex;
		align-items: center;
		width: 100%;
	}

	.item-index {
		margin-right: 10px;
		color: #888;
		font-size: 14px;
	}

	.item-content {
		flex-grow: 1;
		display: flex;
		justify-content: space-between;
		align-items: center;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.item-title {
		font-size: 16px;
		color: #333;
		margin-right: 10px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.item-hot {
		font-size: 14px;
		color: #666;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.fire-icon {
		width: 20px;
		/* 调整小火苗图标的大小 */
		height: 20px;
		/* 调整小火苗图标的大小 */
		margin-left: 10px;
	}
</style>